<template>
    <view class="w">
        <view class="wmain">
            <view class="vtitle" >
                <view class="vticon"></view>
                <span>修改信息</span>
            </view>
            <view class="tab_main" >
                <view class="tab">
                    <view class="title">
                        <span style="background: #197C6C;">1</span>
                        设备信息
                    </view>
                    <view class="inp">
                        <ul>
                            <li v-if="userInfo.DTYPE!=DEVICE_TYPE_BIG"><label for=""><i>*</i>用户姓名</label><input v-model="uinfo.name" type="text" maxlength="4"></li>
                            <li v-if="userInfo.DTYPE!=DEVICE_TYPE_BIG"><label for=""><i>*</i>工号</label><input onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="uinfo.number" type="text" min="1"></li>
                            <li><label for=""><i>*</i>所属单位</label><input v-model="uinfo.uint" type="text" maxlength="21"><span class="errmsg">单位名称填写错误</span></li>
                            <li v-if="userInfo.DTYPE!=DEVICE_TYPE_BIG"><label for=""><i>*</i>所属部门</label><input v-model="uinfo.part" type="text" maxlength="37"></li>
                            <li v-if="userInfo.DTYPE!=DEVICE_TYPE_BIG"><label for="">电话</label><input v-model="uinfo.phone" type="number" maxlength="11"></li>
                            <li><label for="">备注</label><input v-model="uinfo.mark" type="text" maxlength="42"></li>
                        </ul>
                    </view>
                </view>
                <view class="tab">
                    <view class="title"   style="border-left: 5px solid #00A2E9;">
                        <span style="background: #00A2E9;">2</span>
                        入网口令
                    </view>
                    <view class="inp">
                        <ul>
                            <li><label for=""><i>*</i>入网口令</label>
                                <input style="width:150px;text-align: center;" onkeyup="value=value.replace(/[\W]/g,'')" maxlength="6" v-model="iport.key" type="text" >
                                <span class="errmsg">口令填写错误</span>
                            </li>
                            <li><label for=""><i>*</i>中心服务器的IP地址</label>
                                <view class="portInput">
                                    <input style=" border: 0px;
                                                   width: 25%;
                                                   height: 100%;
                                                   text-align: center;
                                                   padding-left:0;
                                                   border-right: 1px solid #EEEEEE;
                                                   border-radius: 0;" 
                                    v-model="iport.ip[0]" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    maxlength="3"/>
                                    <view class="point"><view>.</view></view>
                                    <input style=" border: 0px;
                                                   width: 25%;
                                                   height: 100%;
                                                   text-align: center;
                                                   padding-left:0;
                                                   border-right: 1px solid #EEEEEE;
                                                   border-radius: 0;" 
                                    v-model="iport.ip[1]" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    maxlength="3"/>
                                    <view class="point"><view>.</view></view>
                                    <input style=" border: 0px;
                                                   width: 25%;
                                                   height: 100%;
                                                   text-align: center;
                                                   padding-left:0;
                                                   border-right: 1px solid #EEEEEE;
                                                   border-radius: 0;" 
                                    v-model="iport.ip[2]" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    maxlength="3"/>
                                    <view class="point"><view>.</view></view>
                                    <input style=" border: 0px;
                                                   width: 25%;
                                                   height: 100%;
                                                   text-align: center;
                                                   padding-left:0;
                                                   border-radius: 0;" 
                                    v-model="iport.ip[3]" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    maxlength="3"/>
                                </view>
                            </li>
                            <li>
                                <label for=""><i>*</i>端口</label>
                                <input style="width:150px;text-align: center;" placeholder="eg: 8080" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="5" v-model="iport.port" type="text" />
                            </li>
                            <li><label for=""></label><button @click="addStatus">确定修改</button></li>
                        </ul>
                    </view>
                </view>
            </view>
        </view>
    </view>           
</template>
<script>
import { ref, getCurrentInstance } from "vue";
export default {
    methods:{
        addStatus() {
            this.$default_hloading.isload = false
            this.$default_hloading.istips = false
            let params = {}
            params['uinfo'] = JSON.stringify(this.uinfo)
            params['iport'] = JSON.stringify(this.iport)
            this.$http.get("updateUinfo", {params}).then(res=>{
                if(res.data.code=="RP_OK"){
                    this.$ElMessage.success({message: "激活成功, 请重新登录", duration: 2000})
                    this.userInfo.STATUS = 0
                }else if(res.data.code=="RP_NEXT") {
                    this.$ElMessage.success({message: res.data.msg, duration: 1000})
                    this.status++
                }else{
                    this.$ElMessage.error({message: res.data.msg, duration: 5000})
                }
            }).catch(err=>{
                console.error(err)
                this.$ElMessage.error({message: "服务请求错误", duration: 1000})
            })
        }
    },
    data(){
        return {
            status: 0,
            uinfo:ref({
                name: null,
                number: null,
                uint: null,
                part: null,
                phone: null,
                mark: null,
            }),
            iport:ref({
                key:null,
                ip:[null,null,null,null],
                port:null, //默认
            }),
            upwd:ref({
                opwd:null,
                npwd:null,
                npwd1:null
            }),
            DEVICE_TYPE_BIG: 2,
        }
    },
    mounted(){
        console.log("==============>")
        console.log(this.userInfo)
        console.log(this.uinfo)
        this.uinfo.name=this.userInfo.UINFO.uname
        this.uinfo.number=this.userInfo.UINFO.number
        this.uinfo.part=this.userInfo.UINFO.part
        this.uinfo.uint=this.userInfo.UINFO.uint
        this.uinfo.phone=this.userInfo.UINFO.phone
        this.uinfo.mark=this.userInfo.UINFO.mark

        this.iport.ip = this.userInfo.NETCONFIG.ips
        this.iport.port = this.userInfo.NETCONFIG.port
     
    },

    setup() {
        var {proxy : cthis} = getCurrentInstance()
        return {
            userInfo: ref(cthis.$userInfo)
        }
    }
    
};
</script>

<style scoped>
.errmsg{
    padding-left:30px;
    color:red;
    font-size:8px;
    padding-top: 18px;
}
.point{
    width:0px;
    position: relative;
    display: inline-block;
}
.point>view{
    position: absolute;
    width: 10px;
    height: 40px;
    background: #FFF;
    top: -26px;
    z-index: 10;
    left: -5px;
    line-height: 33px;
    color: #e0e0e6;
}
.portInput{
    height: 42px;
    width: 580px;
    padding-left: 10px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
}
.w{
    overflow: auto;
    height: 100%;
    background: #FAFAFA;
}
.wmain{
    width: 80%;
    min-width: 950px;
    margin: 26px auto;
    background: #fff;
}
.vtitle {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width:100%; 
    padding-left: 50px;
    height: 66px;
    border-bottom: 3px solid #FAFAFA;
}
.vticon {
  min-height:15px;
  max-height: 22px;
  height:70%;
  width: 3px;
  margin-right: 15px;
  background: #2d9386;
}
.vtitle span{
    font-size: 18px;
}
.tab_main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:90%; 
    min-width: 900px;
    margin: 0 auto;
    margin-top: 26px;
}
.tab_main .tab{
    width: 95%;
    padding-left: 45px;
    border-left: 1px solid #D2D2D2;
}
.tab_main .tab .title{
    position: relative;
    width: 100%;
    height: 40px;
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    border-left: 5px solid #197C6C;
    padding-left: 40px;

    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 40px;
}
.tab_main .tab .title span{
    position: absolute;
    top:-1px;
    left: -70px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 38px;
}
.tab_main .tab .inp{
    width: 100%;
    border: 1px solid #EEEEEE;
    margin-bottom: 28px;
}

.tab_main .tab .inp li{
    display: flex;
    align-items: center;
    margin: 28px 42px;
}

.tab_main .tab .inp li input{
    height: 42px;
    width: 580px;
    padding-left: 10px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
}
.tab_main .tab .inp li label{
    width: 100px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}
.tab_main .tab .inp li label i{
    font-style: normal;
    color: red;
}

.tab_main .tab .inp li button{
    width: 200px;
    height: 42px;
    border-radius: 4px;
    background: #197C6C;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;
}
button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

</style>